<template>
    <div class="container">
        <div>
            已完成{{ isCompleted }}/全部{{ list.length }}
        </div>
        <div v-if="isCompleted > 0" class="btn">
            <button @click="clear">清除已完成</button>
        </div>

    </div>
</template>

<script>
import { defineComponent, ref, computed } from 'vue'
export default defineComponent({
    name: 'NavFooter',
    // 接受父组件传递的数据
    // props的数据不能直接修改
    props: {
        list: {
            // 数据类型的校验
            type: Array,
            required: true
        }
    },
    setup(props, ctx) {
        let isCompleted = computed(() => {
            // 过滤已完成的任务
            let arr = props.list.filter((item) => {
                return item.completed
            })
            return arr.length
        })
        // 清除已完成的任务
        let clear = () => {
            // 过滤未完成的任务
            let arr = props.list.filter((item) => {
                return item.completed === false
            })
            ctx.emit('clear', arr)
        }
        return {
            isCompleted,
            clear
        }
    }
})
</script>

<style scoped lang="scss">
.container {
    display: flex;
    align-items: center;
}

.btn {
    margin-left: 10px;
}
</style>